<template>
  <div ref="k" class="item-box flex-1">
    <div class="b-title">按小时统计工具借还频率</div>
    <div ref="chartRef" style="width: 100%; height: 80%" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useDark, useECharts } from "@pureadmin/utils";
import dayjs from "dayjs";
import { realWH } from "@/utils";

const { isDark } = useDark();

const theme = computed(() => (isDark.value ? "dark" : "light"));

const chartRef = ref();

const props = defineProps({
  data: { type: Array, default: () => [] }
});
// 图标数据额
const list = computed(() => {
  const list = [...props.data];
  list.sort((a: any, b: any) => a.time - b.time);
  return list;
});
const xData = computed(() => list.value.map((item: any) => item.time));
const yData1 = computed(() => list.value.map((item: any) => item.returnCount));
const yData2 = computed(() => list.value.map((item: any) => item.lendCount));
const { setOptions } = useECharts(chartRef, {
  theme,
  renderer: "svg"
});
const fontSize = realWH(16).h;
const initData = () => {
  setOptions({
    // grid: {
    //   bottom: realWH(40).h,
    //   left: realWH(60).w,
    //   right: 20
    // },
    color: ["#1E77FF", "#46C687"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    legend: {
      data: ["归还", "借出"],

      textStyle: {
        color: "#FFFFFF",
        fontSize
      },
      right: "5%",
      icon: "rect",
      itemWidth: realWH(14).h,
      itemHeight: realWH(14).h
    },
    grid: {
      left: "5%",
      right: "5%",
      bottom: 0,
      top: "10%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: xData.value,
        axisLabel: {
          color: "#FFFFFF",
          fontSize,
          lineHeight: fontSize + realWH(10).h
        }
      }
    ],
    yAxis: {
      show: true,
      type: "value",
      axisLabel: {
        color: "#FFFFFF",
        fontSize,
        lineHeight: fontSize + realWH(10).h
      }
    },
    series: [
      {
        name: "借出",
        type: "bar",
        data: yData2.value,
        itemStyle: {
          color: "#46C687",
          borderRadius: [10, 10, 0, 0]
        }
      },
      {
        name: "归还",
        type: "bar",
        data: yData1.value,
        itemStyle: {
          color: "#1E77FF",
          borderRadius: [10, 10, 0, 0]
        }
      }
    ]
  });
};

defineExpose({ initData });
</script>

<style scoped lang="scss">
.item-box {
  margin-bottom: 0;
}
</style>
